import React, { FC, useState } from 'react'
import { Button, Divider } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import ProductionVoucher from '~/components/production-voucher'
import TopHeader, { ListTitle } from '~/components/top-header'
import { queryCastItems, handleCenterStorage, queryCenterStorageCastItems } from '~/api/property-management-api'
import SuccessModal from '~/components/submit-successfully'
import { formatTime } from '~/utils/utils'

import { FooterAction } from './styled'
import WaitingList from './container/waiting-list'
import MovedList from './container/moved-list'
import PropertySelect from './components/property-involved-select'
import { getUserInfo } from '~/mock/user/userinfo'

const PropertyInvolved: FC = () => {
  const { state }: any = useLocation()
  const navigate = useNavigate()
  const [selectVisible, setSelectVisible] = useState(false)
  const [successVisible, setSuccessVisible] = useState(false)
  const [certificateVisible, setCertificateVisible] = useState(false)
  const [castItems, setCastItems] = useState([])
  const [selectedItems, setSelectedItems] = useState([])
  const { batchNo, caseName, caseNo, caseCompanyName, caseDepartmentName, caseState, createTime } = state

  const handleGetCastItems = async (value?: any) => {
    const userInfo = getUserInfo()
    if (caseState === 1) {
      const { data } = await queryCenterStorageCastItems({
        ...value,
        caseNo
      })
      setCastItems(data)
    } else {
      const { data } = await queryCastItems({
        ...userInfo,
        ...value,
        batchNo,
        caseName,
        caseNo,
        statusList: ['WAIT', 'SUCCESS']
      })
      setCastItems(data)
    }
  }

  const handleCertificate = async (preview?: boolean) => {
    const userInfo = getUserInfo()
    const { data } = await handleCenterStorage({
      ...userInfo,

      batchNo,
      caseName,
      caseNo,
      preview: !!preview,
      serialNos: selectedItems.map((item: any) => item.serialNo)
    })
    window.open(data.url)
    if (preview) return
    setSuccessVisible(true)
  }

  const headData = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen:
        caseState !== 1
          ? [
              { label: '移交时间:', value: formatTime(createTime) },
              { label: '批次号:', value: batchNo }
            ]
          : [
              { label: '办案单位:', value: caseCompanyName },
              { label: '办案部门:', value: caseDepartmentName }
            ]
    }
  ]

  return (
    <div>
      <TopHeader headData={headData} />
      <ListTitle />
      <Divider />
      <main style={{ marginTop: 21 }}>
        {caseState === 1 ? (
          <WaitingList
            selectedItems={selectedItems}
            handleGetCastItems={handleGetCastItems}
            setSelectVisible={setSelectVisible}
            setSelectedItems={setSelectedItems}
          />
        ) : (
          <MovedList
            castItems={castItems}
            handleGetCastItems={handleGetCastItems}
            setSelectVisible={setSelectVisible}
          />
        )}

        <FooterAction>
          {caseState === 1 ? (
            <div>
              <Button
                onClick={() => {
                  navigate(-1)
                }}
              >
                返回
              </Button>
              <Button onClick={() => handleCertificate(true)} style={{ marginLeft: 8 }}>
                预览集中保管凭证
              </Button>
              <Button
                onClick={() => {
                  handleCertificate()
                }}
                style={{ marginLeft: 8 }}
                type="primary"
              >
                制作集中保管凭证
              </Button>
            </div>
          ) : (
            <Button
              onClick={() => {
                navigate(-1)
              }}
            >
              返回
            </Button>
          )}
        </FooterAction>
      </main>
      <SuccessModal visible={successVisible} />
      <PropertySelect
        setSelectedItems={setSelectedItems}
        castItems={castItems}
        setSelectVisible={setSelectVisible}
        visible={selectVisible}
        selectedItems={selectedItems}
        handleGetCastItems={handleGetCastItems}
      />
      <ProductionVoucher
        onOk={() => {
          setCertificateVisible(false)
        }}
        onCancel={() => {
          setCertificateVisible(false)
        }}
        visible={certificateVisible}
      />
    </div>
  )
}

export default PropertyInvolved
